<template>
  <section class="area">
    <span>地域：</span>
    <a-tree-select class="AtreeSelect" v-model:value="selectAreaData" show-search
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择" allow-clear
      treeNodeFilterProp="areaName" :fieldNames="{
        children: 'children',
        label: 'areaName',
        value: 'areaCode',
      }" :tree-data="areaData" @select="handleChange">
    </a-tree-select>

  </section>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, } from "vue";
import getters from "@/store/getters";
import request from "@/api/index";
//type
interface dataSourceType {
  [propName: string]: any;
}
//emits
const emits = defineEmits(['handleChange']);
//getters
const userInfo = getters.userInfo();
//data
const selectAreaData = ref(""); // 选择区域
const areaData = ref<dataSourceType[]>([{
  areaCode: "",
  areaName: "所有",
  areaType: 1,
  children: [],
  parentId: null
}]);
//watch

//methods 
//获取站点列表
// 获取区域树
const getAreaTree = () => {
  request.getAreaTree().then((res: dataSourceType[]) => {
    areaData.value = areaData.value.concat(res);
  })
}
const handleChange = () => {
  emits('handleChange');
}
//onMounted
onMounted(() => {
  getAreaTree();
})
// defineExpose
defineExpose({ selectAreaData })
</script>

<style lang="less" scoped>
.area {
  .ant-select {
    width: 300px;
  }
}
</style>